<template>
  <div class="app-container">
    <div class="search-container">
      <el-button type="primary" icon="el-icon-search" size="small" @click="getList({pageNo: 1})">搜索</el-button>
    </div>
    <div class="function-buttons">
      <el-button type="primary" size="small" icon="el-icon-edit" @click="showAdd">新增</el-button>
    </div>
    <div>
      <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="#" width="80" type="index" />

        <el-table-column width="" align="center" label="告警类型">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="EVScall_back_name">
          <template slot-scope="scope">
            <span>{{ scope.row.callBackName }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="大类id">
          <template slot-scope="scope">
            <span>{{ scope.row.mainTypeId }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="大类名称">
          <template slot-scope="scope">
            <span>{{ scope.row.mainTypeName }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="小类id">
          <template slot-scope="scope">
            <span>{{ scope.row.minorTypeId }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="小类名称">
          <template slot-scope="scope">
            <span>{{ scope.row.minorTypeName }}</span>
          </template>
        </el-table-column>


        <el-table-column width="" align="center" label="操作人">
          <template slot-scope="scope">
            <span>{{ scope.row.operator }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="更新时间">
          <template slot-scope="scope">
            <span>{{ scope.row.updateTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>


        <el-table-column width="" align="center" label="数据状态">
          <template slot-scope="scope">
            <span>{{ scope.row.status }}</span>
          </template>
        </el-table-column>

        <el-table-column width="100" align="center" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == 0" type="text" @click="showUpdate(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status == 0" type="text" @click="audit(scope.row)">审核</el-button>
            <el-button v-if="scope.row.status == 1" type="text" @click="unaudit(scope.row)">取消审核</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="pageChange" />
    </div>
    <!-- todo 调整表单字段 -->
    <el-dialog title="编辑" :visible.sync="formData.formDialog" :close-on-click-modal="false">
      <el-form ref="saveForm" :model="formData.props" :rules="formData.rules" label-width="180px">
        <el-form-item label="告警类型" prop="name">
          <el-input v-model="formData.props.name" placeholder="请输入告警类型" :clearable="true" />
        </el-form-item>
        <el-form-item label="EVScall_back_name" prop="callBackName">
          <el-input v-model="formData.props.callBackName" placeholder="请输入EVScall_back_name" :clearable="true" />
        </el-form-item>
        <el-form-item label="大类id" prop="mainTypeId">
          <el-input v-model="formData.props.mainTypeId" placeholder="请输入大类id" :clearable="true" />
        </el-form-item>
        <el-form-item label="大类名称" prop="mainTypeName">
          <el-input v-model="formData.props.mainTypeName" placeholder="请输入大类名称" :clearable="true" />
        </el-form-item>
        <el-form-item label="小类id" prop="minorTypeId">
          <el-input v-model="formData.props.minorTypeId" placeholder="请输入小类id" :clearable="true" />
        </el-form-item>
        <el-form-item label="小类名称" prop="minorTypeName">
          <el-input v-model="formData.props.minorTypeName" placeholder="请输入小类名称" :clearable="true" />
        </el-form-item>
        <el-form-item label="操作人" prop="operator">
          <el-input v-model="formData.props.operator" placeholder="请输入操作人" :clearable="true" />
        </el-form-item>
        <el-form-item label="更新时间" prop="updateTime">
          <el-input v-model="formData.props.updateTime" placeholder="请输入更新时间" :clearable="true" />
        </el-form-item>
        <el-form-item label="数据状态" prop="status">
          <el-input v-model="formData.props.status" placeholder="请输入数据状态" :clearable="true" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formData.formDialog = false">取 消</el-button>
        <el-button type="primary" :disabled="btnSubmitDisabled" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import request from '@/utils/request'

export default {
  name: 'OrderAlarmInfoList',
  components: { Pagination },
  data() {
    return {
      btnSubmitDisabled: false,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      formData: {
        formDialog: false,
        // 表单字段, 请自行删除不需要的
        props: {
          name: '',
          callBackName: '',
          mainTypeId: '',
          mainTypeName: '',
          minorTypeId: '',
          minorTypeName: '',
          operator: '',
          updateTime: '',
          status: ''
        },
        // 表单校验规则, 默认增加了必填, 请自行限制长度或者其他修改
        rules: {
          name: this.formRules({ required: true }),
          callBackName: this.formRules({ required: true }),
          mainTypeId: this.formRules({ required: true }),
          mainTypeName: this.formRules({ required: true }),
          minorTypeId: this.formRules({ required: true }),
          minorTypeName: this.formRules({ required: true }),
          operator: this.formRules({ required: true }),
          updateTime: this.formRules({ required: true }),
          status: this.formRules({ required: true })
        }
      },
      searchForm: {}
    }
  },
  created() {
    this.getList({
      pageNo: this.listQuery.pageNo
    })
  },
  methods: {
    pageChange(page) {
      this.getList({
        pageNo: page.page,
        pageSize: page.limit
      })
    },
    getList(params) {
      this.listLoading = true
      request({
        url: '/workorder/orderAlarmInfo/getPageList',
        method: 'post',
        data: {
          pageNo: params.pageNo,
          pageSize: params.pageSize ? params.pageSize : this.listQuery.pageSize,
          ...this.searchForm
        }
      }).then(res => {
        const data = res.data;
        this.list = data.rows;
        this.total = data.total;
        this.listQuery.pageNo = params.pageNo;
        this.listLoading = false;
      }, () => {
        this.listLoading = false;
      })
    },
    audit(data) {
      var _this = this;
      request({
        method: 'post',
        url: `/workorder/orderAlarmInfo/audit?id=${data.id}`,
        data: {}
      }).then(res => {
        _this.$message.success('审核成功');
        data.status = 1;
      })
    },
    unaudit(data) {
      var _this = this;
      request({
        method: 'post',
        url: `/workorder/orderAlarmInfo/unaudit?id=${data.id}`,
        data: {}
      }).then(res => {
        _this.$message.success('取消审核成功');
        data.status = 0;
      })
    },
    showAdd: function() {
      // todo 清除表单中的数据
      this.formData.props = {
        id: '',
        name: '',
        callBackName: '',
        mainTypeId: '',
        mainTypeName: '',
        minorTypeId: '',
        minorTypeName: '',
        operator: '',
        updateTime: '',
        status: ''
      }
      this.formData.formDialog = true;
    },
    showUpdate: function(data) {
      // todo 设置数据进入表单
      this.formData.props = {
        id: data.id,
        name: data.name,
        callBackName: data.callBackName,
        mainTypeId: data.mainTypeId,
        mainTypeName: data.mainTypeName,
        minorTypeId: data.minorTypeId,
        minorTypeName: data.minorTypeName,
        operator: data.operator,
        updateTime: data.updateTime,
        status: data.status
      }
      this.formData.formDialog = true;
    },
    save: function() {
      var _this = this;
      this.disableBtn(this, 'btnSubmitDisabled');
      this['$refs'].saveForm.validate(function(valid) {
        if (!valid) {
          return;
        }
        // todo 注意构造参数_this.formData.props
        request({
          url: '/workorder/orderAlarmInfo/save',
          method: 'post',
          data: _this.formData.props
        }).then(res => {
          _this.$message.success('保存成功');
          _this.getList({
            pageNo: 1,
            pageSize: _this.listQuery.pageSize
          });
          _this.formData.formDialog = false;
        })
      });
    }
  }
}
</script>

<style scoped>

</style>
